<template>
  <div class="employees-container">
    <div class="app-container" />
    <PageTools>
      <template #left>
        <div class="tips">
          <i class="el-icon-info" />
          <span>本月: 社保在缴 公积金在缴</span>
        </div>
      </template>
      <template #right>
        <el-button type="primary" size="small" @click="exportExcel">员工导出</el-button>
        <el-button type="warning" size="small" @click="$router.push('/import')">员工导入</el-button>
        <el-button type="primary" size="small" @click="addEmployee">新增员工</el-button>
      </template>
    </PageTools>

    <!-- 列表 -->
    <el-card style="margin-top: 10px;">
      <el-table :data="list" border>
        <el-table-column label="序号" type="index" align="center" />
        <el-table-column label="姓名" prop="username" align="center" />
        <el-table-column label="工号" prop="workNumber" align="center" />
        <el-table-column label="头像" align="center">
          <template #default="{row}">
            <!-- <img :src="scope.row.staffPhoto" alt="" width="80"> -->
            <el-image :src="row.staffPhoto" class="avatar" style="width:100%; height: 100%" fit="scale-down">
              <!-- 具名插槽新语法  图片加载出错的时候自动显示 -->
              <template #error>
                <!-- <i class="el-icon-picture-outline" /> -->
                <img src="@/assets/common/bigUserHeader.png" width="80">
              </template>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column label="聘用形式" align="center">
          <template #default="{row}">
            {{ formOfEmployment(row.formOfEmployment) }}
          </template>
        </el-table-column>
        <el-table-column label="部门" prop="departmentName" align="center" />
        <el-table-column label="入职时间" width="180" prop="correctionTime" align="center">
          <template #default="{row}">
            {{ formatDate(row.correctionTim) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="200" align="center">
          <template #default="{row}">
            <el-button type="text" size="small" @click="goDetail(row.id)">查看</el-button>
            <el-button type="text" size="small" @click="assignRole(row.id)">分配角色</el-button>
            <el-button type="text" size="small" @click="fetchDelEmploy(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row type="flex" justify="center" align="middle" style="height: 60px; margin-top: 10px">
        <el-pagination
          :current-page="params.page"
          :page-size="params.size"
          layout="total, prev, pager, next"
          :total="total"
          @current-change="ChangePage"
        />
      </el-row>
    </el-card>
    <!-- 新增员工弹窗 组件 -->
    <adde-employee
      :visible="visible"
      @close-dialog="closeDialog"
      @updata-list="fetchList"
    />
    <!-- 分配角色弹窗 -->
    <el-dialog
      class="assign-role"
      title="分配角色"
      :visible="showRoleDialog"
      @close="closeAllotDelEmploy"
      @open="roleOpenlist"
    >
      <!-- 多选框组 -->
      <el-checkbox-group v-model="checkList">
        <el-checkbox
          v-for="item in roleList"
          :key="item.id"
          :label="item.id"
        >{{ item.name }}</el-checkbox>
      </el-checkbox-group>
      <template #footer>
        <el-button type="primary" size="small" @click="confirmAssign">确定</el-button>
        <el-button size="small" @click="showRoleDialog=false">取消</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
// PageTools插件已经全局注册了 无须在import，components
import AddeEmployee from './components/add-employee.vue'
import { getListEmployees, delEmployee, getEmployeeList, assignRoles } from '@/api/employees'
import { getExportData } from '@/utils/excel/excel.js'
import { getUserDetailById } from '@/api/user'
import { getRoleList } from '@/api/Setting'
import dayjs from 'dayjs' // 格式时间

export default {
  components: {
    AddeEmployee
  },
  data() {
    return {
      // 员工列表
      list: [],
      // 分页
      params: {
        page: 1,
        size: 10
      },
      // 数据总条数
      total: 0,
      // 弹窗
      visible: false,
      // 分配角色弹窗初始值
      showRoleDialog: false,
      //
      curId: '',
      // 数组放选中项的label值 ，永远保存选中项的id
      checkList: [],
      // 角色列表 （存放从后台获取来的列表）
      roleList: []
    }
  },
  mounted() {
    this.fetchList()
  },
  methods: {
    // 掉接口 渲染列表
    async fetchList() {
      const { rows, total } = await getListEmployees(this.params)
      this.list = rows
      this.total = total
    },
    // 聘用形式转换 （数字->文字）
    formOfEmployment(value) {
      // 格式化
      // 通过枚举的写法定义一个对象关系
      // 好处：1. 它可以简化ifelse分支语句  2.对应关系清晰明了方便灵活扩展
      const TYPE = {
        1: '正式聘用',
        2: '非正式聘用',
        3: '临时聘用',
        4: '绿色通道'
      }
      return TYPE[value]
    },
    // 聘用时间转换
    formatDate(value) {
      return dayjs(value).format('YYYY-MM-DD')
    },
    // 分页变化时触发函数
    ChangePage(page) {
      this.params.page = page
      // 从新加载列表 发请求
      this.fetchList()
    },
    // 删除  为啥没有权限______________________________________________________
    fetchDelEmploy(id) {
      this.$confirm('此操作将永久删除该员工, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
      // 调接口
        await delEmployee(id)
        // 渲染列表
        this.fetchList()
        // 提示
        this.$message.success('删除员工成功')
      }).catch()
    },
    // 新增弹窗
    addEmployee() {
      this.visible = true
    },
    // 关闭弹窗
    closeDialog() {
      this.visible = false
    },
    //  导出
    exportExcel() {
      // 按需导入语法 什么时候要用导出的功能 什么时候就动态的把这个包加入到项目中 路由懒加载类似
      import('@/vendor/Export2Excel').then(async(excel) => {
        // console.log(excel)
        // 1. 调用接口 和获取表格数据的写法是一样的
        const res = await getEmployeeList(this.params)
        // 2. 数据的二次处理 后端返回的数据不能直接用
        const headerRelation = {
          '姓名': 'username',
          '手机号': 'mobile',
          '入职日期': 'timeOfEntry',
          '工号': 'workNumber',
          '聘用形式': 'formOfEmployment',
          '部门': 'departmentName'
        }
        const { data } = getExportData(res.rows, headerRelation)
        excel.export_json_to_excel({
          header: Object.keys(headerRelation), // 表头header 必填 要求是一个数组
          data: data, // 表格数据body 要求是一个二维数组
          filename: 'excel-list', // 文件名称
          autoWidth: true, // 宽度是否自适应
          bookType: 'xlsx' // 生成的文件类型
        })
      })
    },
    // 查看
    goDetail(id) {
      this.$router.push({
        path: '/employeesDetail',
        query: {
          id
        }
      })
    },
    // 打开分配角色弹窗
    assignRole(id) {
      // 点击谁就将谁的id保存下来
      this.curId = id
      // 打开弹窗
      this.showRoleDialog = true
    },
    // 关闭分配角色弹窗
    closeAllotDelEmploy() {
      // 关闭弹窗
      this.showRoleDialog = false
      // 清除所有选中项
      this.checkList = []
    },
    // 打开弹窗
    async roleOpenlist() {
      const res = await getRoleList()
      this.roleList = res.rows
      // 调角色信息接口获取详情 设置id参数
      const detail = await getUserDetailById(this.curId)
      this.checkList = detail.roleIds
    },
    // 确定提交
    async confirmAssign() {
      await assignRoles({
        id: this.curId,
        roleIds: this.checkList
      })
      // 关闭弹窗
      this.closeAllotDelEmploy()
      this.$message.success('分配角色成功')
    }

  }
}
</script>

<style>

</style>
